import React from 'react';
import { List, Card, Icon, Avatar, Button, Popconfirm } from 'antd';
import BreadcrumbCustom from '../common/BreadcrumbCustom';
import fileImg from '../../style/img/file.jpg';
import styles from './index.less';

const data = [
    { title: '资料1', description: '一二三四五六七八九十一二三四五六七八九十' },
    { title: '资料2', description: 'This is the description1111111111111111111111111' },
    { title: '资料3', description: 'This is the description' },
    { title: '资料4', description: 'This is the description' },
    { title: '资料5', description: 'This is the description' },
    { title: '资料6', description: 'This is the description' },
    { title: '资料7', description: 'This is the description' },
    { title: '资料8', description: 'This is the description' },
    { title: '资料8', description: 'This is the description' },
    { title: '资料7', description: 'This is the description' },
    { title: '资料8', description: 'This is the description' },
    { title: '资料8', description: 'This is the description' },
];

const { Meta } = Card;

export default class DataManagement extends React.Component {

    onDelete = () => {

    }

    render() {
        return (
            <div>
                <BreadcrumbCustom paths={['首页', '资料管理']} />
                <div className={styles.cardList}>
                    <List
                        bordered
                        dataSource={['', ...data]}
                        pagination={{
                            pageSize: 9,
                        }}
                        grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
                        renderItem={item =>
                            item ? (
                                <List.Item style={{ paddingTop: 24 }}>
                                    <Card
                                        hoverable
                                        className={styles.card}
                                        actions={[<Icon type="edit" />,
                                        <Popconfirm title="确定要删除吗?" onConfirm={() => this.onDelete(item)} okText='确定' cancelText='取消'>
                                            <Icon type="delete" />
                                        </Popconfirm>]}
                                    >
                                        <Meta
                                            avatar={<Avatar className={styles.cardAvatar} src={fileImg} />}
                                            title={<a>{item.title}</a>}
                                            description={item.description.length > 18 ? item.description.substring(0, 18) + '...' : item.description}
                                        />
                                    </Card>
                                </List.Item>
                            ) : (
                                    <List.Item style={{ paddingTop: 24 }}>
                                        <Button type="dashed" style={{ width: '100%', height: 142.6 }} >
                                            <Icon type="plus" /> 新增资料
                                        </Button>
                                    </List.Item>
                                )}
                    />
                </div>
                <div style={{ paddingTop: 20 }}></div>
            </div>
        )
    }
}